import { categoryGet } from "@/api/course";
import { CategoryType } from "@/types/course";
import { Button, Col, Row, Space, Table, Modal } from "antd";
import type { ColumnsType } from "antd/es/table";
import { useEffect, useState } from "react";
import CategoryForm from "./components/category-form";

// const data: CategoryType[] = [
//   {
//     objectId: "111",
//     name: "睡眠",
//     parentId: "0-0",
//   },
// ];

const Category: React.FC = () => {
  let [data, setData] = useState<Array<CategoryType>>([]);
  let [isModalOpen, setModelOpen] = useState<boolean>(false);
  let [editData, setEditData] = useState<CategoryType | null>(null);
  const columns: ColumnsType<CategoryType> = [
    {
      title: "类目关系",
      dataIndex: "parentId",
      key: "parentId",
      render: (pid) => {
        return pid == "0-0" ? "一级" : "二级";
      },
    },
    {
      title: "分类名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <Button
            type="primary"
            size="small"
            onClick={() => {
              handleEditAdd(record);
            }}
          >
            编辑
          </Button>
          <Button type="primary" size="small" danger>
            删除
          </Button>
        </Space>
      ),
    },
  ];
  useEffect(() => {
    categoryGet().then((res) => {
      let list = settleData(res.data.results);
      setData(list);
    });
  }, []);
  const settleData = (list: Array<CategoryType>) => {
    let parentArr = list.filter((item) => item.parentId == "0-0");
    parentArr.forEach((item) => {
      let children = list.filter((child) => child.parentId == item.objectId);
      if (children.length) {
        item.children = children;
      }
    });
    return parentArr;
  };
  //接收子组件新数据
  const handleUpdate = (cateObj: CategoryType) => {
    console.log(cateObj);
    setModelOpen(false);
    if (editData) {
      //更新
      updateData(cateObj);
    } else {
      //新增
      addData(cateObj);
    }
    setData([...data]);
  };
  //更新列表
  const updateData = (edata: CategoryType) => {
    let { objectId, name } = edata;
    function loop(arr: CategoryType[]) {
      arr.forEach((item) => {
        if (item.objectId == objectId) {
          item.name = name;
        }
        if (item.children) {
          loop(item.children);
        }
      });
    }
    loop(data);
    setData([...data]);
  };
  //新增列表数据
  const addData = (cateObj: CategoryType) => {
    if (cateObj.parentId == "0-0") {
      data.push(cateObj);
    } else {
      for (let i = 0; i < data.length; i++) {
        if (data[i].objectId == cateObj.parentId) {
          if (data[i].children) {
            data[i].children.push(cateObj);
          } else {
            data[i].children = [cateObj];
          }
          break;
        }
      }
    }
  };
  const handleEditAdd = (edata: CategoryType | null) => {
    console.log(edata);
    setEditData(edata);
    setModelOpen(true);
  };
  return (
    <>
      <Row justify="space-between" align="middle">
        <Col>课程分类管理</Col>
        <Col>
          <Button
            type="primary"
            onClick={() => {
              handleEditAdd(null);
            }}
          >
            新增分类
          </Button>
        </Col>
      </Row>
      <Table columns={columns} dataSource={data} rowKey="objectId" />
      <Modal
        title="新增分类"
        open={isModalOpen}
        onCancel={() => {
          setModelOpen(false);
        }}
        footer={null}
      >
        <CategoryForm
          handleUpdate={handleUpdate}
          data={data}
          edata={editData}
        />
      </Modal>
    </>
  );
};

export default Category;
